<template>        
    <div class="friend-card">
        <div class="friend-card-avatar">
            <el-image style="width: 70px; height: 70px" :src="friendInfo.userImgUrl" />
        </div>
        <div class="friend-card-info">

            <div class="friend-card-info-id">
                <span>
                    ID:&nbsp{{ friendInfo.userId }}
                </span>
            </div>
            <div class="friend-card-info-name">
                <span style="overflow: hidden; text-overflow: ellipsis;">
                    用户名:&nbsp{{ friendInfo.userName }}
                </span>
            </div>
            <div class="friend-card-info-profile">
                <div class="see" @click="showUserInfo(friendInfo)">
                    <el-button size="small" type="success">查看</el-button>
                </div>
                <div class="action" @click="sendAddMsg(friendInfo)">
                    <el-button  size="small" type="primary">添加</el-button>
                </div>
            </div>

        </div>
    </div>


</template>

<script setup>
import {ref,reactive, defineEmits} from 'vue'
import { ElMessage,ElNotification } from 'element-plus'


// 子组件接受父组件的传值
const props = defineProps({
    friendInfo:{}
})

const emit = defineEmits(["show-userinfo"])

const showUserInfo =(user)=>{
    console.log("进入查看用户信息函数",user);
    // 子组件给父组件传值,显示用户信息页面
    emit("show-userinfo",{"flag":true, "info":props.friendInfo})
}

const sendAddMsg =(user)=>{
    console.log("进入添加用户函数",user);
    // 弹出提示已经发送提示消息
    ElNotification({
            title: '消息已发送',
            message: '已经发送请求,等待对方通过!',
        })
}

</script>

<style scoped lang="scss">

.friend-card {
    background-color: #FAFAFA;
    height: 100%;
    border-radius: 10px;
    display: flex;
    padding-top: 20px;
    padding-left: 40px;
    .friend-card-avatar {
        margin-right: 20px;
        margin-top: 10px;
    }
    .friend-card-info{
        margin-top: 10px;
        .friend-card-info-id, .friend-card-info-name{
            span{
                font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
            }
        }
        .friend-card-info-profile {
            display: flex;
            .see {
                margin-right: 10px;
            }
            // 修改button中显示的字体
            :deep(.el-button) {
                span{
                    font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                }
            }
        }
    }
}

// 增加鼠标移入移出样式修改 
.friend-card:hover {
    background-color: #fef0f0;
}

</style>